<template>
  <view class="content">
    <!-- :controls="false" :show-center-play-btn="false"  -->
    <video id="video_play" :src="src" @play="playVideo" :loop="true" autoplay="true" object-fit="contain" :controls="false"
      width="100%" class="myvideo" :enable-play-gesture = "true" :show-loading = "false" :show-mute-btn = "false" :show-fullscreen-btn = "false">
      <!-- <cover-view @click="doubleSpeed" style="myspeed">倍速</cover-view> -->
      <!-- <view style="position: absolute;top: 128rpx;right: 60rpx;" @click="doubleSpeed">倍速</view> -->
      </video>
      <view class="use">
        <view class="tips" @click="last">
          <u-icon name="arrow-left-double" color="#2979ff" size="28"></u-icon>
          <text class="tip-text">上一章节</text>
        </view>
        <view class="tips" @click="next">
          <text class="tip-text">下一章节</text>
          <u-icon name="arrow-right-double" color="#2979ff" size="28"></u-icon>
        </view>
      </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        src: "",
		originalAudioId:1,
		tltUrl:"",
		total:0,
      }
    },
    methods: {
      playVideo() {

      },
      last() {
		  this.originalAudioId--
		  if(this.originalAudioId>0){
			  this.getvideo()
		  }else{
			  uni.showToast({
			    title: "此章节不存在",
			    icon: "error",
			  });
		  }
      },
      next() {
        this.originalAudioId++
		if(this.originalAudioId<=this.total){
			this.getvideo()
		}else{
			  uni.showToast({
				title: "此章节不存在",
				icon: "error",
			  });
		}
      },
	  getvideo(){
		  uni.showLoading({
		  	title: '需要等些时间',
		    mask: false
		  });
		uni.request({
		  url: this.tltUrl+"/api/mouse", 
		  method: "POST",
		  header: {
			"content-type": "application/json",
		  },
			data:{
				id:this.originalAudioId
			},
		  success: (res) => {
			  uni.hideLoading();
			  this.src=res.data.fileUrl
		  }
		});
	  },
    },
    onLoad(e) {
	   // 接收参数
	   this.originalAudioId=JSON.parse(e.positionResult).originalAudioId
	   this.total=JSON.parse(e.positionResult).total
      // 生成实例
      this.videoContext = uni.createVideoContext('video_play', this)
	  uni.request({
		url: "https://zzr.api.yuleng.top/api/mouse/server", 
		method: "GET",
		header: {
		  "content-type": "application/json",
		  token: uni.getStorageSync("token"),
		},
		success: (res) => {
			this.tltUrl=res.data.message
			this.getvideo()
		},
	  });
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: black !important;
  }
  .content {
    height: 100vh;
    background-color: black  !important;
    .myvideo {
      height: 90vh;
      width: 100%;
    }
      
    .use {
      background-color: black;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      margin-bottom: 10px;
      margin-left: 10px;
      margin-right: 10px;
      .tips {
        display: flex;
        .tip-text {
          margin-top: 2px;
          color: white;
        }
      }
    }
  }
  /deep/.uni-showLoading .uni-showLoading__wrapper {
      height: 20vh !important;
      background-color: aqua !important;
      padding: 40rpx;
  }
</style>